<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML标签学习指南</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f5f5f5;
        }
        
        header {
            background-color: #2c3e50;
            color: white;
            padding: 2rem 0;
            text-align: center;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        
        .container {
            display: flex;
            max-width: 1400px;
            margin: 0 auto;
            padding: 2rem;
        }
        
        nav {
            width: 280px;
            flex-shrink: 0;
            background-color: white;
            border-radius: 8px;
            padding: 1.5rem;
            margin-right: 2rem;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            position: sticky;
            top: 2rem;
            max-height: calc(100vh - 4rem);
            overflow-y: auto;
        }
        
        main {
            flex-grow: 1;
            background-color: white;
            border-radius: 8px;
            padding: 2rem;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }
        
        h1 {
            font-size: 2.5rem;
            margin-bottom: 0.5rem;
        }
        
        h2 {
            font-size: 2rem;
            margin: 2rem 0 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid #3498db;
            color: #2c3e50;
        }
        
        h3 {
            font-size: 1.5rem;
            margin: 1.5rem 0 1rem;
            color: #34495e;
        }
        
        h4 {
            font-size: 1.2rem;
            margin: 1.2rem 0 0.8rem;
            color: #7f8c8d;
        }
        
        p {
            margin-bottom: 1rem;
        }
        
        .nav-title {
            font-size: 1.2rem;
            font-weight: bold;
            margin-bottom: 1rem;
            color: #2c3e50;
        }
        
        .nav-group {
            margin-bottom: 1.5rem;
        }
        
        .nav-group-title {
            font-weight: bold;
            margin-bottom: 0.5rem;
            color: #34495e;
            font-size: 1rem;
        }
        
        .nav-list {
            list-style: none;
            padding-left: 0.5rem;
        }
        
        .nav-list li {
            margin-bottom: 0.5rem;
        }
        
        .nav-list a {
            color: #7f8c8d;
            text-decoration: none;
            display: block;
            padding: 0.3rem 0.5rem;
            border-radius: 4px;
            transition: all 0.2s;
        }
        
        .nav-list a:hover {
            background-color: #ecf0f1;
            color: #3498db;
        }
        
        .tag-card {
            background-color: #f8f9fa;
            border-left: 4px solid #3498db;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            border-radius: 0 8px 8px 0;
        }
        
        .tag-name {
            font-family: 'Courier New', Courier, monospace;
            font-weight: bold;
            color: #e74c3c;
            font-size: 1.1rem;
            margin-bottom: 0.5rem;
        }
        
        .tag-description {
            margin-bottom: 1rem;
        }
        
        .tag-syntax {
            background-color: #2c3e50;
            color: #ecf0f1;
            padding: 1rem;
            border-radius: 6px;
            font-family: 'Courier New', Courier, monospace;
            margin-bottom: 1rem;
            overflow-x: auto;
        }
        
        .tag-example {
            border: 1px solid #ddd;
            border-radius: 6px;
            padding: 1rem;
            margin-bottom: 1rem;
            background-color: #fafafa;
        }
        
        .tag-properties {
            margin-top: 1rem;
        }
        
        .tag-properties h5 {
            font-size: 1rem;
            margin-bottom: 0.5rem;
            color: #34495e;
        }
        
        .tag-properties ul {
            padding-left: 1.5rem;
            margin-bottom: 1rem;
        }
        
        .tag-properties li {
            margin-bottom: 0.3rem;
        }
        
        .example-content {
            border: 1px solid #ddd;
            padding: 1rem;
            background-color: white;
            margin-top: 0.5rem;
        }
        
        code {
            font-family: 'Courier New', Courier, monospace;
            background-color: #f1f1f1;
            padding: 0.2rem 0.4rem;
            border-radius: 3px;
            font-size: 0.9rem;
        }
        
        @media (max-width: 992px) {
            .container {
                flex-direction: column;
            }
            
            nav {
                width: 100%;
                margin-right: 0;
                margin-bottom: 2rem;
                position: relative;
                top: 0;
                max-height: none;
            }
        }
        
        /* 特殊样式用于标签示例 */
        .example-header {
            background-color: #f8f9fa;
            padding: 10px;
            border-radius: 4px;
            margin-bottom: 10px;
        }
        
        .example-nav {
            background-color: #343a40;
            color: white;
            padding: 10px;
            border-radius: 4px;
            margin-bottom: 10px;
        }
        
        .example-nav a {
            color: #adb5bd;
            text-decoration: none;
            margin-right: 15px;
        }
        
        .example-nav a:hover {
            color: white;
        }
        
        .example-button {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        
        .example-button:hover {
            background-color: #0056b3;
        }
        
        .example-image {
            max-width: 100%;
            height: auto;
            border-radius: 4px;
        }
        
        .example-table {
            width: 100%;
            border-collapse: collapse;
            margin: 10px 0;
        }
        
        .example-table th, .example-table td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        
        .example-table th {
            background-color: #f2f2f2;
        }
        
        /* 动画效果 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .tag-card {
            animation: fadeIn 0.5s ease-out;
        }
    </style>
</head>
<body>
    <header>
        <h1>HTML标签学习指南</h1>
        <p>全面了解HTML标签的用法与示例</p>
    </header>
    
    <div class="container">
        <nav>
            <div class="nav-title">目录</div>
            
            <div class="nav-group">
                <div class="nav-group-title">基础标签</div>
                <ul class="nav-list">
                    <li><a href="#document">文档结构</a></li>
                    <li><a href="#text">文本标签</a></li>
                    <li><a href="#hyperlinks">超链接</a></li>
                    <li><a href="#images">图像</a></li>
                </ul>
            </div>
            
            <div class="nav-group">
                <div class="nav-group-title">组织与语义</div>
                <ul class="nav-list">
                    <li><a href="#structure">结构标签</a></li>
                    <li><a href="#semantic">语义标签</a></li>
                    <li><a href="#list">列表</a></li>
                    <li><a href="#table">表格</a></li>
                </ul>
            </div>
            
            <div class="nav-group">
                <div class="nav-group-title">表单与输入</div>
                <ul class="nav-list">
                    <li><a href="#forms">表单</a></li>
                    <li><a href="#input">输入元素</a></li>
                    <li><a href="#buttons">按钮</a></li>
                </ul>
            </div>
            
            <div class="nav-group">
                <div class="nav-group-title">多媒体</div>
                <ul class="nav-list">
                    <li><a href="#audio">音频</a></li>
                    <li><a href="#video">视频</a></li>
                </ul>
            </div>
            
            <div class="nav-group">
                <div class="nav-group-title">交互与高级</div>
                <ul class="nav-list">
                    <li><a href="#iframe">iframe</a></li>
                    <li><a href="#scripts">脚本</a></li>
                    <li><a href="#meta">元信息</a></li>
                </ul>
            </div>
        </nav>
        
        <main>
            <section id="document">
                <h2>文档结构标签</h2>
                <p>这些标签定义了HTML文档的基本结构。</p>
                
                <div class="tag-card">
                    <div class="tag-name">&lt;!DOCTYPE html&gt;</div>
                    <div class="tag-description">定义文档类型和HTML版本。</div>
                    <div class="tag-syntax">&lt;!DOCTYPE html&gt;</div>
                    <div class="tag-example">
                        <strong>示例：</strong>
                        <div class="example-content">
                            每个HTML5文档的第一行都应该是这个声明
                        </div>
                    </div>
                </div>
                
                <div class="tag-card">
                    <div class="tag-name">&lt;html&gt;</div>
                    <div class="tag-description">HTML文档的根元素。</div>
                    <div class="tag-syntax">&lt;html lang="zh-CN"&gt;...&lt;/html&gt;</div>
                    <div class="tag-properties">
                        <h5>常用属性：</h5>
                        <ul>
                            <li><code>lang</code> - 指定文档的语言</li>
                        </ul>
                    </div>
                </div>
                
                <div class="tag-card">
                    <div class="tag-name">&lt;head&gt;</div>
                    <div class="tag-description">包含文档的元数据，如标题、字符集等。</div>
                    <div class="tag-syntax">&lt;head&gt;...&lt;/head&gt;</div>
                </div>
                
                <div class="tag-card">
                    <div class="tag-name">&lt;title&gt;</div>
                    <div class="tag-description">定义文档的标题，显示在浏览器标签页。</div>
                    <div class="tag-syntax">&lt;title&gt;页面标题&lt;/title&gt;</div>
                    <div class="tag-example">
                        <strong>示例：</strong>
                        <div class="example-content">
                            <title>HTML标签学习指南</title>
                        </div>
                    </div>
                </div>
                
                <div class="tag-card">
                    <div class="tag-name">&lt;body&gt;</div>
                    <div class="tag-description">包含可见的页面内容。</div>
                    <div class="tag-syntax">&lt;body&gt;...&lt;/body&gt;</div>
                </div>
            </section>
            
            <section id="text">
                <h2>文本标签</h2>
                <p>这些标签用于格式化和显示文本内容。</p>
                
                <div class="tag-card">
                    <div class="tag-name">&lt;h1&gt; - &lt;h6&gt;</div>
                    <div class="tag-description">定义HTML标题，h1级别最高，h6级别最低。</div>
                    <div class="tag-syntax">&lt;h1&gt;标题内容&lt;/h1&gt;</div>
                    <div class="tag-example">
                        <strong>示例：</strong>
                        <div class="example-content">
                            <h1>这是一级标题</h1>
                            <h2>这是二级标题</h2>
                            <h3>这是三级标题</h3>
                        </div>
                    </div>
                </div>
                
                <div class="tag-card">
                    <div class="tag-name">&lt;p&gt;</div>
                    <div class="tag-description">定义段落。</div>
                    <div class="tag-syntax">&lt;p&gt;段落内容&lt;/p&gt;</div>
                    <div class="tag-example">
                        <strong>示例：</strong>
                        <div class="example-content">
                            <p>这是一个段落，用于显示一段文本内容。</p>
                        </div>
                    </div>
                </div>
                
                <div class="tag-card">
                    <div class="tag-name">&lt;br&gt;</div>
                    <div class="tag-description">插入换行符。</div>
                    <div class="tag-syntax">&lt;br&gt;</div>
                    <div class="tag-example">
                        <strong>示例：</strong>
                        <div class="example-content">
                            第一行<br>第二行
                        </div>
                    </div>
                </div>
                
                <div class="tag-card">
                    <div class="tag-name">&lt;hr&gt;</div>
                    <div class="tag-description">定义水平线，用于分隔内容。</div>
                    <div class="tag-syntax">&lt;hr&gt;</div>
                    <div class="tag-example">
                        <strong>示例：</strong>
                        <div class="example-content">
                            内容1
                            <hr>
                            内容2
                        </div>
                    </div>
                </div>
                
                <div class="tag-card">
                    <div class="tag-name">&lt;strong&gt;</div>
                    <div class="tag-description">定义重要文本，通常显示为粗体。</div>
                    <div class="tag-syntax">&lt;strong&gt;重要文本&lt;/strong&gt;</div>
                    <div class="tag-example">
                        <strong>示例：</strong>
                        <div class="example-content">
                            这是<strong>重要的文本</strong>。
                        </div>
                    </div>
                </div>
                
                <div class="tag-card">
                    <div class="tag-name">&lt;em&gt;</div>
                    <div class="tag-description">定义强调文本，通常显示为斜体。</div>
                    <div class="tag-syntax">&lt;em&gt;强调文本&lt;/em&gt;</div>
                    <div class="tag-example">
                        <strong>示例：</strong>
                        <div class="example-content">
                            这是<em>强调的文本</em>。
                        </div>
                    </div>
                </div>
                
                <div class="tag-card">
                    <div class="tag-name">&lt;span&gt;</div>
                    <div class="tag-description">定义行内容器，用于对文本的一部分进行样式化。</div>
                    <div class="tag-syntax">&lt;span&gt;文本&lt;/span&gt;</div>
                    <div class="tag-example">
                        <strong>示例：</strong>
                        <div class="example-content">
                            这是<span style="color:red;">红色</span>的文本。
                        </div>
                    </div>
                </div>
                
                <div class="tag-card">
                    <div class="tag-name">&lt;div&gt;</div>
                    <div class="tag-description">定义块级容器，用于组合内容。</div>
                    <div class="tag-syntax">&lt;div&gt;内容&lt;/div&gt;</div>
                    <div class="tag-example">
                        <strong>示例：</strong>
                        <div class="example-content">
                            <div style="background-color: lightblue; padding: 10px;">
                                这是一个div容器
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            
            <section id="hyperlinks">
                <h2>超链接标签</h2>
                <p>用于创建链接到其他页面或资源的元素。</p>
                
                <div class="tag-card">
                    <div class="tag-name">&lt;a&gt;</div>
                    <div class="tag-description">定义超链接，用于从一个页面链接到另一个页面。</div>
                    <div class="tag-syntax">&lt;a href="url" target="_blank"&gt;链接文本&lt;/a&gt;</div>
                    <div class="tag-properties">
                        <h5>常用属性：</h5>
                        <ul>
                            <li><code>href</code> - 指定链接的目标URL</li>
                            <li><code>target</code> - 指定在何处打开链接（_blank表示新窗口）</li>
                            <li><code>title</code> - 提供链接的额外信息</li>
                        </ul>
                    </div>
                    <div class="tag-example">
                        <strong>示例：</strong>
                        <div class="example-content">
                            <a href="https://www.example.com" target="_blank">访问示例网站</a>
                        </div>
                    </div>
                </div>
            </section>
            
            <section id="images">
                <h2>图像标签</h2>
                <p>用于在网页中嵌入图像。</p>
                
                <div class="tag-card">
                    <div class="tag-name">&lt;img&gt;</div>
                    <div class="tag-description">在网页中嵌入图像。</div>
                    <div class="tag-syntax">&lt;img src="image.jpg" alt="描述文本" width="300" height="200"&gt;</div>
                    <div class="tag-properties">
                        <h5>常用属性：</h5>
                        <ul>
                            <li><code>src</code> - 指定图像的URL</li>
                            <li><code>alt</code> - 图像的替代文本（当图像无法显示时）</li>
                            <li><code>width</code> - 图像的宽度</li>
                            <li><code>height</code> - 图像的高度</li>
                        </ul>
                    </div>
                    <div class="tag-example">
                        <strong>示例：</strong>
                        <div class="example-content">
                            <img src="https://picsum.photos/300/200" alt="示例图片" class="example-image">
                        </div>
                    </div>
                </div>
                
                <div class="tag-card">
                    <div class="tag-name">&lt;figure&gt; 和 &lt;figcaption&gt;</div>
                    <div class="tag-description">用于为图像添加标题。</div>
                    <div class="tag-syntax">
                        &lt;figure&gt;
                        <br>&nbsp;&nbsp;&lt;img src="image.jpg" alt="描述文本"&gt;
                        <br>&nbsp;&nbsp;&lt;figcaption&gt;图像标题&lt;/figcaption&gt;
                        <br>&lt;/figure&gt;
                    </div>
                    <div class="tag-example">
                        <strong>示例：</strong>
                        <div class="example-content">
                            <figure>
                                <img src="https://picsum.photos/300/200" alt="示例图片" class="example-image">
                                <figcaption>这是一张示例图片</figcaption>
                            </figure>
                        </div>
                    </div>
                </div>
            </section>
            
            <section id="structure">
                <h2>结构标签</h2>
                <p>用于创建网页的结构布局。</p>
                
                <div class="tag-card">
                    <div class="tag-name">&lt;header&gt;</div>
                    <div class="tag-description">定义文档的页眉，通常包含网站标志、导航链接等。</div>
                    <div class="tag-syntax">&lt;header&gt;...&lt;/header&gt;</div>
                    <div class="tag-example">
                        <strong>示例：</strong>
                        <div class="example-content">
                            <div class="example-header">
                                <h1>网站标题</h1>
                                <p>网站副标题或描述</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="tag-card">
                    <div class="tag-name">&lt;nav&gt;</div>
                    <div class="tag-description">定义导航链接的部分。</div>
                    <div class="tag-syntax">&lt;nav&gt;...&lt;/nav&gt;</div>
                    <div class="tag-example">
                        <strong>示例：</strong>
                        <div class="example-content">
                            <div class="example-nav">
                                <a href="#home">首页</a>
                                <a href="#about">关于</a>
                                <a href="#contact">联系我们</a>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="tag-card">
                    <div class="tag-name">&lt;main&gt;</div>
                    <div class="tag-description">定义文档的主要内容。</div>
                    <div class="tag-syntax">&lt;main&gt;...&lt;/main&gt;</div>
                </div>
                
                <div class="tag-card">
                    <div class="tag-name">&lt;footer&gt;</div>
                    <div class="tag-description">定义文档的页脚，通常包含版权信息、联系方式等。</div>
                    <div class="tag-syntax">&lt;footer&gt;...&lt;/footer&gt;</div>
                    <div class="tag-example">
                        <strong>示例：</strong>
                        <div class="example-content">
                            <footer style="background-color: #f8f9fa; padding: 10px; text-align: center;">
                                &copy; 2023 版权所有
                            </footer>
                        </div>
                    </div>
                </div>
                
                <div class="tag-card">
                    <div class="tag-name">&lt;section&gt;</div>
                    <div class="tag-description">定义文档中的节（section、区段）。</div>
                    <div class="tag-syntax">&lt;section&gt;...&lt;/section&gt;</div>
                </div>
                
                <div class="tag-card">
                    <div class="tag-name">&lt;article&gt;</div>
                    <div class="tag-description">定义独立的、完整的内容块，如博客文章、评论等。</div>
                    <div class="tag-syntax">&lt;article&gt;...&lt;/article&gt;</div>
                </div>
            </section>
            
            <section id="semantic">
                <h2>语义标签</h2>
                <p>这些标签提供了关于内容的额外语义信息。</p>
                
                <div class="tag-card">
                    <div class="tag-name">&lt;aside&gt;</div>
                    <div class="tag-description">定义页面的侧边栏内容。</div>
                    <div class="tag-syntax">&lt;aside&gt;...&lt;/aside&gt;</div>
                </div>
                
                <div class="tag-card">
                    <div class="tag-name">&lt;mark&gt;</div>
                    <div class="tag-description">定义带有记号的文本。</div>
                    <div class="tag-syntax">&lt;mark&gt;高亮文本&lt;/mark&gt;</div>
                    <div class="tag-example">
                        <strong>示例：</strong>
                        <div class="example-content">
                            这是<mark>高亮显示</mark>的文本。
                        </div>
                    </div>
                </div>
                
                <div class="tag-card">
                    <div class="tag-name">&lt;time&gt;</div>
                    <div class="tag-description">定义日期或时间。</div>
                    <div class="tag-syntax">&lt;time datetime="2023-01-01"&gt;2023年1月1日&lt;/time&gt;</div>
                    <div class="tag-example">
                        <strong>示例：</strong>
                        <div class="example-content">
                            发布日期：<time datetime="2023-01-01">2023年1月1日</time>
                        </div>
                    </div>
                </div>
                
                <div class="tag-card">
                    <div class="tag-name">&lt;address&gt;</div>
                    <div class="tag-description">定义文档或文章的联系信息。</div>
                    <div class="tag-syntax">&lt;address&gt;联系信息&lt;/address&gt;</div>
                    <div class="tag-example">
                        <strong>示例：</strong>
                        <div class="example-content">
                            <address>
                                联系我们：<a href="mailto:info@example.com">info@example.com</a><br>
                                地址：北京市朝阳区
                            </address>
                        </div>
                    </div>
                </div>
            </section>
            
            <section id="list">
                <h2>列表标签</h2>
                <p>用于创建各种类型的列表。</p>
                
                <div class="tag-card">
                    <div class="tag-name">&lt;ul&gt;</div>
                    <div class="tag-description">定义无序列表，项目前有圆点或其他符号。</div>
                    <div class="tag-syntax">
                        &lt;ul&gt;
                        <br>&nbsp;&nbsp;&lt;li&gt;列表项1&lt;/li&gt;
                        <br>&nbsp;&nbsp;&lt;li&gt;列表项2&lt;/li&gt;
                        <br>&lt;/ul&gt;
                    </div>
                    <div class="tag-example">
                        <strong>示例：</strong>
                        <div class="example-content">
                            <ul>
                                <li>苹果</li>
                                <li>香蕉</li>
                                <li>橙子</li>
                            </ul>
                        </div>
                    </div>
                </div>
                
                <div class="tag-card">
                    <div class="tag-name">&lt;ol&gt;</div>
                    <div class="tag-description">定义有序列表，项目前有数字或字母。</div>
                    <div class="tag-syntax">
                        &lt;ol&gt;
                        <br>&nbsp;&nbsp;&lt;li&gt;第一步&lt;/li&gt;
                        <br>&nbsp;&nbsp;&lt;li&gt;第二步&lt;/li&gt;
                        <br>&lt;/ol&gt;
                    </div>
                    <div class="tag-example">
                        <strong>示例：</strong>
                        <div class="example-content">
                            <ol>
                                <li>打开浏览器</li>
                                <li>输入网址</li>
                                <li>按回车键</li>
                            </ol>
                        </div>
                    </div>
                </div>
                
                <div class="tag-card">
                    <div class="tag-name">&lt;li&gt;</div>
                    <div class="tag-description">定义列表项，用在ul或ol中。</div>
                    <div class="tag-syntax">&lt;li&gt;列表项&lt;/li&gt;</div>
                </div>
                
                <div class="tag-card">
                    <div class="tag-name">&lt;dl&gt;, &lt;dt&gt;, &lt;dd&gt;</div>
                    <div class="tag-description">定义描述列表，包含术语和描述。</div>
                    <div class="tag-syntax">
                        &lt;dl&gt;
                        <br>&nbsp;&nbsp;&lt;dt&gt;术语1&lt;/dt&gt;
                        <br>&nbsp;&nbsp;&lt;dd&gt;描述1&lt;/dd&gt;
                        <br>&nbsp;&nbsp;&lt;dt&gt;术语2&lt;/dt&gt;
                        <br>&nbsp;&nbsp;&lt;dd&gt;描述2&lt;/dd&gt;
                        <br>&lt;/dl&gt;
                    </div>
                    <div class="tag-example">
                        <strong>示例：</strong>
                        <div class="example-content">
                            <dl>
                                <dt>HTML</dt>
                                <dd>超文本标记语言</dd>
                                <dt>CSS</dt>
                                <dd>层叠样式表</dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </section>
            
            <section id="table">
                <h2>表格标签</h2>
                <p>用于创建表格来展示数据。</p>
                
                <div class="tag-card">
                    <div class="tag-name">&lt;table&gt;</div>
                    <div class="tag-description">定义HTML表格。</div>
                    <div class="tag-syntax">
                        &lt;table&gt;
                        <br>&nbsp;&nbsp;...表格内容...
                        <br>&lt;/table&gt;
                    </div>
                </div>
                
                <div class="tag-card">
                    <div class="tag-name">&lt;thead&gt;</div>
                    <div class="tag-description">定义表格的表头部分。</div>
                    <div class="tag-syntax">&lt;thead&gt;...&lt;/thead&gt;</div>
                </div>
                
                <div class="tag-card">
                    <div class="tag-name">&lt;tbody&gt;</div>
                    <div class="tag-description">定义表格的主体部分。</div>
                    <div class="tag-syntax">&lt;tbody&gt;...&lt;/tbody&gt;</div>
                </div>
                
                <div class="tag-card">
                    <div class="tag-name">&lt;tr&gt;</div>
                    <div class="tag-description">定义表格中的一行。</div>
                    <div class="tag-syntax">&lt;tr&gt;...&lt;/tr&gt;</div>
                </div>
                
                <div class="tag-card">
                    <div class="tag-name">&lt;th&gt;</div>
                    <div class="tag-description">定义表格中的表头单元格。</div>
                    <div class="tag-syntax">&lt;th&gt;表头内容&lt;/th&gt;</div>
                </div>
                
                <div class="tag-card">
                    <div class="tag-name">&lt;td&gt;</div>
                    <div class="tag-description">定义表格中的标准单元格。</div>
                    <div class="tag-syntax">&lt;td&gt;单元格内容&lt;/td&gt;</div>
                </div>
                
                <div class="tag-card">
                    <div class="tag-name">表格综合示例</div>
                    <div class="tag-syntax">
                        &lt;table&gt;
                        <br>&nbsp;&nbsp;&lt;thead&gt;
                        <br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;
                        <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;姓名&lt;/th&gt;
                        <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;年龄&lt;/th&gt;
                        <br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt;
                        <br>&nbsp;&nbsp;&lt;/thead&gt;
                        <br>&nbsp;&nbsp;&lt;tbody&gt;
                        <br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;
                        <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;张三&lt;/td&gt;
                        <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;25&lt;/td&gt;
                        <br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt;
                        <br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;
                        <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;李四&lt;/td&gt;
                        <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;30&lt;/td&gt;
                        <br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt;
                        <br>&nbsp;&nbsp;&lt;/tbody&gt;
                        <br>&lt;/table&gt;
                    </div>
                    <div class="tag-example">
                        <strong>示例：</strong>
                        <div class="example-content">
                            <table class="example-table">
                                <thead>
                                    <tr>
                                        <th>姓名</th>
                                        <th>年龄</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>张三</td>
                                        <td>25</td>
                                    </tr>
                                    <tr>
                                        <td>李四</td>
                                        <td>30</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </section>
            
            <section id="forms">
                <h2>表单标签</h2>
                <p>用于创建表单，收集用户输入。</p>
                
                <div class="tag-card">
                    <div class="tag-name">&lt;form&gt;</div>
                    <div class="tag-description">定义HTML表单，用于收集用户输入。</div>
                    <div class="tag-syntax">&lt;form action="submit.php" method="post"&gt;...&lt;/form&gt;</div>
                    <div class="tag-properties">
                        <h5>常用属性：</h5>
                        <ul>
                            <li><code>action</code> - 提交表单的URL</li>
                            <li><code>method</code> - 提交方法（get或post）</li>
                            <li><code>enctype</code> - 表单数据的编码类型</li>
                        </ul>
                    </div>
                </div>
                
                <div class="tag-card">
                    <div class="tag-name">&lt;label&gt;</div>
                    <div class="tag-description">定义表单元素的标签，提高可访问性。</div>
                    <div class="tag-syntax">&lt;label for="username"&gt;用户名：&lt;/label&gt;</div>
                    <div class="tag-example">
                        <strong>示例：</strong>
                        <div class="example-content">
                            <label for="username">用户名：</label>
                            <input type="text" id="username">
                        </div>
                    </div>
                </div>
                
                <div class="tag-card">
                    <div class="tag-name">&lt;input&gt;</div>
                    <div class="tag-description">定义输入控件，根据type属性显示不同的输入类型。</div>
                    <div class="tag-syntax">&lt;input type="text" name="username" value="默认值" placeholder="提示文本"&gt;</div>
                    <div class="tag-properties">
                        <h5>常用属性：</h5>
                        <ul>
                            <li><code>type</code> - 输入类型（text, password, email等）</li>
                            <li><code>name</code> - 输入字段的名称</li>
                            <li><code>value</code> - 输入字段的默认值</li>
                            <li><code>placeholder</code> - 输入字段的提示文本</li>
                            <li><code>required</code> - 表示字段为必填项</li>
                        </ul>
                    </div>
                </div>
                
                <div class="tag-card">
                    <div class="tag-name">&lt;textarea&gt;</div>
                    <div class="tag-description">定义多行文本输入控件。</div>
                    <div class="tag-syntax">&lt;textarea name="message" rows="4" cols="50"&gt;默认文本&lt;/textarea&gt;</div>
                    <div class="tag-example">
                        <strong>示例：</strong>
                        <div class="example-content">
                            <textarea rows="4" cols="50" placeholder="请输入留言..."></textarea>
                        </div>
                    </div>
                </div>
                
                <div class="tag-card">
                    <div class="tag-name">&lt;select&gt; 和 &lt;option&gt;</div>
                    <div class="tag-description">定义下拉列表和列表选项。</div>
                    <div class="tag-syntax">
                        &lt;select name="cars"&gt;
                        <br>&nbsp;&nbsp;&lt;option value="volvo"&gt;沃尔沃&lt;/option&gt;
                        <br>&nbsp;&nbsp;&lt;option value="saab"&gt;萨博&lt;/option&gt;
                        <br>&lt;/select&gt;
                    </div>
                    <div class="tag-example">
                        <strong>示例：</strong>
                        <div class="example-content">
                            <select>
                                <option value="volvo">沃尔沃</option>
                                <option value="saab">萨博</option>
                                <option value="mercedes">奔驰</option>
                                <option value="audi">奥迪</option>
                            </select>
                        </div>
                    </div>
                </div>
            </section>
            
            <section id="input">
                <h2>输入元素</h2>
                <p>各种类型的输入字段。</p>
                
                <div class="tag-card">
                    <div class="tag-name">文本输入</div>
                    <div class="tag-description">单行文本输入框。</div>
                    <div class="tag-syntax">&lt;input type="text" name="username"&gt;</div>
                    <div class="tag-example">
                        <strong>示例：</strong>
                        <div class="example-content">
                            <input type="text" placeholder="请输入文本">
                        </div>
                    </div>
                </div>
                
                <div class="tag-card">
                    <div class="tag-name">密码输入</div>
                    <div class="tag-description">密码输入框，输入内容会被隐藏。</div>
                    <div class="tag-syntax">&lt;input type="password" name="password"&gt;</div>
                    <div class="tag-example">
                        <strong>示例：</strong>
                        <div class="example-content">
                            <input type="password" placeholder="请输入密码">
                        </div>
                    </div>
                </div>
                
                <div class="tag-card">
                    <div class="tag-name">电子邮件输入</div>
                    <div class="tag-description">电子邮件输入框，具有基本的验证功能。</div>
                    <div class="tag-syntax">&lt;input type="email" name="email"&gt;</div>
                    <div class="tag-example">
                        <strong>示例：</strong>
                        <div class="example-content">
                            <input type="email" placeholder="请输入邮箱">
                        </div>
                    </div>
                </div>
                
                <div class="tag-card">
                    <div class="tag-name">数字输入</div>
                    <div class="tag-description">数字输入框，只能输入数字。</div>
                    <div class="tag-syntax">&lt;input type="number" name="quantity" min="1" max="10"&gt;</div>
                    <div class="tag-example">
                        <strong>示例：</strong>
                        <div class="example-content">
                            <input type="number" min="1" max="10" placeholder="请输入数字">
                        </div>
                    </div>
                </div>
                
                <div class="tag-card">
                    <div class="tag-name">单选按钮</div>
                    <div class="tag-description">一组互斥的选项，只能选择其中一个。</div>
                    <div class="tag-syntax">
                        &lt;input type="radio" name="gender" value="male"&gt; 男
                        <br>&lt;input type="radio" name="gender" value="female"&gt; 女
                    </div>
                    <div class="tag-example">
                        <strong>示例：</strong>
                        <div class="example-content">
                            <input type="radio" name="gender" id="male" value="male">
                            <label for="male">男</label>
                            <input type="radio" name="gender" id="female" value="female">
                            <label for="female">女</label>
                        </div>
                    </div>
                </div>
                
                <div class="tag-card">
                    <div class="tag-name">复选框</div>
                    <div class="tag-description">可以选择多个选项的复选框。</div>
                    <div class="tag-syntax">
                        &lt;input type="checkbox" name="hobbies" value="reading"&gt; 阅读
                        <br>&lt;input type="checkbox" name="hobbies" value="sports"&gt; 运动
                    </div>
                    <div class="tag-example">
                        <strong>示例：</strong>
                        <div class="example-content">
                            <input type="checkbox" name="hobbies" id="reading" value="reading">
                            <label for="reading">阅读</label>
                            <input type="checkbox" name="hobbies" id="sports" value="sports">
                            <label for="sports">运动</label>
                            <input type="checkbox" name="hobbies" id="music" value="music">
                            <label for="music">音乐</label>
                        </div>
                    </div>
                </div>
            </section>
            
            <section id="buttons">
                <h2>按钮标签</h2>
                <p>用于创建可点击的按钮。</p>
                
                <div class="tag-card">
                    <div class="tag-name">&lt;button&gt;</div>
                    <div class="tag-description">定义一个可点击的按钮。</div>
                    <div class="tag-syntax">&lt;button type="button"&gt;点击我&lt;/button&gt;</div>
                    <div class="tag-properties">
                        <h5>常用属性：</h5>
                        <ul>
                            <li><code>type</code> - 按钮类型（button, submit, reset）</li>
                            <li><code>disabled</code> - 禁用按钮</li>
                        </ul>
                    </div>
                    <div class="tag-example">
                        <strong>示例：</strong>
                        <div class="example-content">
                            <button class="example-button" type="button">普通按钮</button>
                            <button class="example-button" type="submit">提交按钮</button>
                            <button class="example-button" type="reset">重置按钮</button>
                        </div>
                    </div>
                </div>
                
                <div class="tag-card">
                    <div class="tag-name">&lt;input type="button"&gt;</div>
                    <div class="tag-description">定义一个按钮。</div>
                    <div class="tag-syntax">&lt;input type="button" value="点击我"&gt;</div>
                    <div class="tag-example">
                        <strong>示例：</strong>
                        <div class="example-content">
                            <input type="button" value="输入按钮" class="example-button">
                        </div>
                    </div>
                </div>
            </section>
            
            <section id="audio">
                <h2>音频标签</h2>
                <p>用于在网页中嵌入音频内容。</p>
                
                <div class="tag-card">
                    <div class="tag-name">&lt;audio&gt;</div>
                    <div class="tag-description">定义声音内容。</div>
                    <div class="tag-syntax">
                        &lt;audio controls&gt;
                        <br>&nbsp;&nbsp;&lt;source src="audio.mp3" type="audio/mpeg"&gt;
                        <br>&nbsp;&nbsp;您的浏览器不支持音频元素。
                        <br>&lt;/audio&gt;
                    </div>
                    <div class="tag-properties">
                        <h5>常用属性：</h5>
                        <ul>
                            <li><code>controls</code> - 显示音频控件（播放/暂停按钮等）</li>
                            <li><code>autoplay</code> - 自动开始播放</li>
                            <li><code>loop</code> - 循环播放</li>
                            <li><code>muted</code> - 默认静音</li>
                        </ul>
                    </div>
                    <div class="tag-example">
                        <strong>示例：</strong>
                        <div class="example-content">
                            <audio controls>
                                <source src="https://samplelib.com/lib/preview/mp3/sample-15s.mp3" type="audio/mpeg">
                                您的浏览器不支持音频元素。
                            </audio>
                        </div>
                    </div>
                </div>
            </section>
            
            <section id="video">
                <h2>视频标签</h2>
                <p>用于在网页中嵌入视频内容。</p>
                
                <div class="tag-card">
                    <div class="tag-name">&lt;video&gt;</div>
                    <div class="tag-description">定义视频内容。</div>
                    <div class="tag-syntax">
                        &lt;video width="320" height="240" controls&gt;
                        <br>&nbsp;&nbsp;&lt;source src="movie.mp4" type="video/mp4"&gt;
                        <br>&nbsp;&nbsp;您的浏览器不支持视频元素。
                        <br>&lt;/video&gt;
                    </div>
                    <div class="tag-properties">
                        <h5>常用属性：</h5>
                        <ul>
                            <li><code>width</code> - 设置视频播放器的宽度</li>
                            <li><code>height</code> - 设置视频播放器的高度</li>
                            <li><code>controls</code> - 显示视频控件</li>
                            <li><code>autoplay</code> - 自动开始播放</li>
                            <li><code>loop</code> - 循环播放</li>
                            <li><code>muted</code> - 默认静音</li>
                        </ul>
                    </div>
                    <div class="tag-example">
                        <strong>示例：</strong>
                        <div class="example-content">
                            <video width="320" height="240" controls>
                                <source src="https://samplelib.com/lib/preview/mp4/sample-10s.mp4" type="video/mp4">
                                您的浏览器不支持视频元素。
                            </video>
                        </div>
                    </div>
                </div>
            </section>
            
            <section id="iframe">
                <h2>iframe标签</h2>
                <p>用于在网页中嵌入另一个HTML文档。</p>
                
                <div class="tag-card">
                    <div class="tag-name">&lt;iframe&gt;</div>
                    <div class="tag-description">定义内联框架，用于在当前HTML文档中嵌入另一个文档。</div>
                    <div class="tag-syntax">&lt;iframe src="https://www.example.com" width="600" height="400"&gt;&lt;/iframe&gt;</div>
                    <div class="tag-properties">
                        <h5>常用属性：</h5>
                        <ul>
                            <li><code>src</code> - 嵌入页面的URL</li>
                            <li><code>width</code> - 框架的宽度</li>
                            <li><code>height</code> - 框架的高度</li>
                            <li><code>frameborder</code> - 是否显示框架边框</li>
                        </ul>
                    </div>
                    <div class="tag-example">
                        <strong>示例：</strong>
                        <div class="example-content">
                            <iframe src="https://example.com" width="100%" height="300" frameborder="0"></iframe>
                            <p>注意：由于浏览器安全限制，实际环境中iframe内容可能无法显示</p>
                        </div>
                    </div>
                </div>
            </section>
            
            <section id="scripts">
                <h2>脚本标签</h2>
                <p>用于在网页中嵌入或引用脚本。</p>
                
                <div class="tag-card">
                    <div class="tag-name">&lt;script&gt;</div>
                    <div class="tag-description">定义客户端脚本，通常是JavaScript。</div>
                    <div class="tag-syntax">
                        &lt;script&gt;
                        <br>&nbsp;&nbsp;console.log('Hello World!');
                        <br>&lt;/script&gt;
                        <br>
                        <br>或
                        <br>
                        <br>&lt;script src="script.js"&gt;&lt;/script&gt;
                    </div>
                    <div class="tag-properties">
                        <h5>常用属性：</h5>
                        <ul>
                            <li><code>src</code> - 外部脚本文件的URL</li>
                            <li><code>type</code> - 脚本的MIME类型</li>
                            <li><code>async</code> - 异步加载脚本</li>
                            <li><code>defer</code> - 延迟执行脚本</li>
                        </ul>
                    </div>
                    <div class="tag-example">
                        <strong>示例：</strong>
                        <div class="example-content">
                            <button class="example-button" onclick="alert('Hello World!')">点击我</button>
                            <script>
                                console.log('这是一个脚本示例');
                            </script>
                        </div>
                    </div>
                </div>
                
                <div class="tag-card">
                    <div class="tag-name">&lt;noscript&gt;</div>
                    <div class="tag-description">定义在浏览器不支持脚本时显示的内容。</div>
                    <div class="tag-syntax">&lt;noscript&gt;您的浏览器不支持JavaScript!&lt;/noscript&gt;</div>
                </div>
            </section>
            
            <section id="meta">
                <h2>元信息标签</h2>
                <p>用于提供关于HTML文档的元数据。</p>
                
                <div class="tag-card">
                    <div class="tag-name">&lt;meta&gt;</div>
                    <div class="tag-description">定义关于HTML文档的元数据，如字符集、关键词等。</div>
                    <div class="tag-syntax">
                        &lt;meta charset="UTF-8"&gt;
                        <br>&lt;meta name="description" value="网页描述"&gt;
                        <br>&lt;meta name="keywords" value="关键词1, 关键词2"&gt;
                        <br>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
                    </div>
                    <div class="tag-properties">
                        <h5>常用属性：</h5>
                        <ul>
                            <li><code>charset</code> - 定义文档的字符编码</li>
                            <li><code>name</code> - 元数据的名称</li>
                            <li><code>content</code> - 元数据的内容</li>
                        </ul>
                    </div>
                </div>
                
                <div class="tag-card">
                    <div class="tag-name">&lt;link&gt;</div>
                    <div class="tag-description">定义文档与外部资源的关系，通常用于链接CSS文件。</div>
                    <div class="tag-syntax">&lt;link rel="stylesheet" href="style.css"&gt;</div>
                    <div class="tag-properties">
                        <h5>常用属性：</h5>
                        <ul>
                            <li><code>rel</code> - 定义当前文档与被链接文档之间的关系</li>
                            <li><code>href</code> - 被链接文档的URL</li>
                            <li><code>type</code> - 被链接文档的MIME类型</li>
                        </ul>
                    </div>
                </div>
                
                <div class="tag-card">
                    <div class="tag-name">&lt;style&gt;</div>
                    <div class="tag-description">定义HTML文档的样式信息。</div>
                    <div class="tag-syntax">
                        &lt;style&gt;
                        <br>&nbsp;&nbsp;body {
                        <br>&nbsp;&nbsp;&nbsp;&nbsp;background-color: lightblue;
                        <br>&nbsp;&nbsp;}
                        <br>&lt;/style&gt;
                    </div>
                </div>
            </section>
        </main>
    </div>
    
    <footer style="background-color: #2c3e50; color: white; text-align: center; padding: 2rem 0; margin-top: 2rem;">
        <p>HTML标签学习指南 - 全面掌握HTML基础</p>
    </footer>
</body>
</html>
